<template>
	<view class="ph_input" >
		
	</view>
</template>

<script>
	/**
	 * @Author: NXJ
	 * @property {String} value 组件的值，
	 * @property {String} borderType = [outLine|inputFill] 边框类型
	 * @property {String} type = [textarea|input|password] 输入框类型
	 * @property {String} colorStyle = [default|primary|success|warning|error] 颜色类型
	 * @property {String} placeholder =  占位符内容
	 */
export default {
		name: 'PhInput',
		model: {
			prop: 'value', // 将value作为该组件被使用(被父组件调用)时,v-model能取到的值
			event: 'input' // emit(触发)input的时候，参数的值就是父组件v-model收到的值。
		},
		props: {
			value: String,
			type: {
				type: String,
				default: 'input'
			},
			borderType: {
				type: String,
				default: 'outLine'
			},
			colorStyle: {
				type: String,
				default: ''
			},
			placeholder: String,
		},
		data() {
			return {
				focus: false,
				childVal: this.value
			};
		},
		watch: {
			value(newVal) {//使用父组件中变量名为函数名，监听value的变化，如果变化，则改变子组件中的值
				this.childVal = newVal;
			}
		},
		methods:{
			onControlInput(e){
				this.$emit('input',e.target.value)
			},
			onControlFocus(e){
				this.$emit('focus',e)
				this.focus = true
			},
			onControlBlur(e){
				this.$emit('blur',e)
				this.focus = false
			},
			
		}
	}
</script>

<style lang="scss">
	
</style>
